<template>
	<div id="temp">
		<ul class="mui-table-view">
			<!-- 动态渲染新闻信息 -->
			<li v-for="item in list" class="mui-table-view-cell mui-media">
				<!-- 跳转的同时需要传参到地址栏 所以需要用v-bind绑定  字符串的拼接 -->
				<router-link v-bind="{to: '/news/newsInfo/' + item.id}">
					<img class="mui-media-object mui-pull-left" :src="item.img_url">
					<div class="mui-media-body mui-ellipsis">
						{{item.title}}
						<p class="mui-ellipsis" v-text="item.zhaiyao"></p>
					</div>
					<div class="click">
						<span>发表时间: {{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
						<span>点击数: {{item.click}}</span>
					</div>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		methods: {
			getNewsList() {
				var url = this.$common.apidomain + '/api/getnewslist';
				this.$http.get(url).then(function (res) {
					console.log(res.body);
					if (res.body.status != 0) {
						Toast('请求错误');
						return;
					}
					this.list = res.body.message;
				});
			}
		},
		created() {
			this.getNewsList();
		}
	}
</script>

<style scoped>
	.mui-table-view .mui-media-object {
		width: 80px;
		height: 80px;
		max-width: 80px;
	}
	.click {
		font-size: 12px;
		margin-top: 1.5em;
		color: #007aff;
	}
	.click span:last-child {
		margin-left: 10px;
	}
	p.mui-ellipsis {
		margin-top: 5px;
	}
</style>